<template>
  <div class="mod-api__job">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-select v-model="state.dataForm.companyId" placeholder="请选择公司" value-key="" clearable filterable @change="">
          <el-option key="" label="全部" value=""> </el-option>
          <el-option v-for="item in vcxvfgt" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model.trim="state.dataForm.name" placeholder="职位标题" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.type" placeholder="请选择类型" value-key="" clearable filterable @change="">
          <el-option key="" label="全部" value=""> </el-option>
          <el-option v-for="item in jjxcf" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model.trim="state.dataForm.tag" placeholder="标签" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.pay" placeholder="请选择日领薪水" clearable filterable @change="">
          <el-option key="" label="全部" value=""> </el-option>
          <el-option v-for="item in 10" :key="(item + 1) * 50" :label="100 + '~' + (item + 2) * 50" :value="(item + 1) * 50"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.isStop" placeholder="请选择状态" clearable filterable @change="">
          <el-option key="" label="全部" value=""> </el-option>
          <el-option label="上架" :value="false"> </el-option>
          <el-option label="下架" :value="true"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button v-if="state.hasPermission('api:job:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('api:job:delete')" type="danger" @click="state.deleteHandle()">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="companyId" label="公司" header-align="center" align="center">
        <template #default="scope">
          {{ jkxdfxsd(scope.row.companyId) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="visitorNum" label="浏览人数" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="jobDate" width="100" label="招聘时间" header-align="center" align="center">
        <template #default="scope">
          {{ transferTimeYMD(scope.row.jobDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="标题" header-align="center" align="center"></el-table-column>
      <el-table-column prop="type" label="类型" header-align="center" align="center" width="150">
        <template #default="scope">
          <el-tag class="ml5" type="success" v-for="sd in jkxdf(scope.row.type)">{{ sd }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="content" label="招聘内容" header-align="center" align="center"></el-table-column> -->
      <!-- <el-table-column prop="img" label="缩略图" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="tag" label="标签" header-align="center" align="center">
        <template #default="scope">
          <el-tag class="ml5" type="success" v-for="sd in jkxdfxccr(scope.row.tag)">{{ sd }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pay" label="日领薪水" width="100" header-align="center" align="center"></el-table-column>
      <el-table-column prop="payOverall" label="综合薪水" width="100" header-align="center" align="center"></el-table-column>
      <el-table-column label="状态" width="100" header-align="center" align="center">
        <template #default="scope">
          <span v-if="scope.row.isStop"> 下架 </span>
          <span v-else> 上架 </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="payType" label="薪水类型（1日 2周 3 月 4年）字典 pay_type" header-align="center" align="center"></el-table-column>
              <el-table-column prop="payDate" label="发薪日" header-align="center" align="center"></el-table-column>
              <el-table-column prop="payContent" label="薪资详情" header-align="center" align="center"></el-table-column>
              <el-table-column prop="classContent" label="班别" header-align="center" align="center"></el-table-column>
              <el-table-column prop="dressing" label="着装" header-align="center" align="center"></el-table-column>
              <el-table-column prop="posture" label="工作姿势 " header-align="center" align="center"></el-table-column>
              <el-table-column prop="ageContent" label="年龄要求" header-align="center" align="center"></el-table-column>
              <el-table-column prop="idCard" label="身份证" header-align="center" align="center"></el-table-column>
              <el-table-column prop="tattoo" label="纹身" header-align="center" align="center"></el-table-column>
              <el-table-column prop="english" label="英文" header-align="center" align="center"></el-table-column>
              <el-table-column prop="companyContent" label="公司简介" header-align="center" align="center"></el-table-column>
              <el-table-column prop="jobAddress" label="工作地址" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="createTime" width="160" label="创建时间" header-align="center" align="center"></el-table-column>
      <!-- <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>
              <el-table-column prop="createOwner" label="创建人" header-align="center" align="center"></el-table-column>
              <el-table-column prop="updateOwner" label="更新人" header-align="center" align="center"></el-table-column> -->
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('api:job:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>

          <el-button type="primary" link @click="scxtrtye(scope.row)">
            {{ scope.row.isStop ? "上架" : "下架" }}
          </el-button>

          <!-- <el-button v-if="state.hasPermission('api:job:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList">确定</add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./job-add-or-update.vue";
import { dxget, zkjsd, transferTimeYMD, dxpost } from "@/utils/utils";
import { ElMessage } from "element-plus";
const view = reactive({
  deleteIsBatch: true,
  getDataListURL: "/sys/job/page",
  getDataListIsPage: true,
  exportURL: "/api/job/export",
  deleteURL: "/api/job"
});
const jjxcf = ref();
const vcxvfgt = ref([]);

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const getsd = async () => {
  jjxcf.value = [];
  const { list } = await zkjsd("1765699469696520194");
  list.map((a) => {
    jjxcf.value.push({
      label: a.dictLabel,
      value: a.dictValue
    });
  });
};
getsd();
const injxsd = async () => {
  const resd = await dxget("/sys/tmcompany/option");
  vcxvfgt.value = resd;
};
injxsd();

const jkxdf = (item) => {
  try {
    const jxcfd = [];
    jjxcf.value.map((a) => {
      item.split(",").map((b) => {
        if (a.value == b) {
          jxcfd.push(a.label);
        }
      });
    });
    return jxcfd;
  } catch (e) {
    return "-";
  }
};
const jkxdfxsd = (item) => {
  try {
    return vcxvfgt.value.filter((a) => a.id == item)[0].name;
  } catch (e) {
    return "-";
  }
};
const jkxdfxccr = (data) => {
  return data.split(",");
};
const scxtrtye = async (data) => {
  let mxdrt = false;
  if (!data.isStop) {
    mxdrt = true;
  }
  await dxpost(
    "/api/job",
    {
      id: data.id,
      isStop: mxdrt
    },
    "put"
  );
  data.isStop = mxdrt;
  ElMessage({
    message: "操作成功",
    type: "success"
  });
};
</script>
